<template>
  <div class="brandupdate">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="iconfont icon-dingdan"></span><span>修改品牌信息</span>
      </div>
    </el-card>
    <el-form :model="brandList" :rules="rules" ref="ruleForm">
      <!-- 商品分类 -->
      <el-form-item label="品牌名称:" :prop="name">
        <el-input v-model="brandList.name"></el-input>
      </el-form-item>
      <el-form-item label="品牌首字母:" prop="first_letter">
        <el-input v-model="brandList.first_letter"></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO:" prop="logo">
        <el-input v-model="brandList.logo"></el-input>
      </el-form-item>
      <el-form-item label="品牌专区大图:" prop="big_pic">
        <el-input v-model="brandList.big_pic"></el-input>
      </el-form-item>
      <el-form-item label="品牌故事:" prop="brand_story">
        <el-input type="textarea" :rows="2" v-model="brandList.brand_story">
        </el-input>
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="brandList.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示:">
        <template>
          <el-radio v-model="show_status" label="1">是</el-radio>
          <el-radio v-model="show_status" label="0">否</el-radio>
        </template>

      </el-form-item>
      <el-form-item label="品牌制造商:">
        <el-radio v-model="factory_status" label="1">是</el-radio>
        <el-radio v-model="factory_status" label="0">否</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import "@/assets/style/global.css";
import { updateBrand, getBrand } from '@/api/product'
export default {
  name: "brandUpdate",
  data: function () {
    return {
      brandList: [],
    }
  },
  mounted () {
    this.getBranddata()
  },
  methods: {
    async getBranddata () {
      var res = await updateBrand({ id: this.$route.params.id });
      console.log(res)
      this.brandList = res.data;
    },
    async getbrandList () {
      var res = await getBrand()
      console.log(res);
    },
    submitForm () {
      //validate 是一个函数，功能是对表单进行验证
      //参数是回调函数， 回调函数中的参数 valid 的值可以是 true（验证通过） 或false（验证失败）
      //console.log(this.$refs[formName]);//element ui 封装的 表单组件
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          //验证通过
          console.log("可以提交表单了");
          //添加商品二级分类名称、商品的品牌名称
          this.brandOptions.forEach((i) => {
            if (i.id == this.listQuery.brand_id) {
              this.listQuery.brand_name = i.name;
            }
          });
          this.productCateOptions.forEach((i) => {
            i.children.forEach((j) => {
              if (j.value == this.listQuery.product_category_id) {
                this.listQuery.product_category_name = j.label;
              }
            });
          });
          console.log(this.listQuery);
          //调用 后台接口，添加 商品数据
          updateBrand(this.listQuery).then((res) => {
            //console.log(res);
            if (res.status == 200) {
              //提示
              this.$message({
                message: "恭喜你，修改了一条商品记录",
                type: "success",
              });
              //跳转到列表页
              this.$router.push("/pms/brand");
            }
          });
        } else {
          //验证没通过
          console.log("验证失败");
          return false;
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.brandupdate {
  margin: 20px;
  .box-card {
    margin-bottom: 20px;
  }
}
</style>
<style>
.el-form-item__label {
  width: 120px;
  text-align: right;
}
.el-form-item__content {
  display: flex;
}
</style>
